<template>
	<view class="calculator-page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" title="房租计算器"></CustomNav>
		<image :src="imgStorage+'/rent/calculator_bg.png '" class="home-bg" mode="widthFix"></image>
		<view class="info-block" :style="'margin-top:'+mt">
			<view class="title LENGKU">滞纳金费用明细</view>
			<view class="text">保障性住房滞纳金 </view>
			<view class="info-content">
				<view class="info-item">
					<view class="info-title">房屋类型</view>
					<view class="info-text">廉租房</view>
				</view>
				<view class="info-item">
					<view class="info-title">欠费时段</view>
					<view class="info-text">2024-07-01至2024-12-31（半年）</view>
				</view>
				<view class="info-item">
					<view class="info-title">欠费金额</view>
					<view class="info-text">387.6 元</view>
				</view>
				<view class="info-item">
					<view class="info-title">收费标准</view>
					<view class="info-text">0.5%</view>
				</view>
			</view>
			<view class="price-block">
				<view class="price-info">
					<view class="price-name">滞纳金累计天数</view>
					<view class="price-text">
						2025-01-01至2025-01-31（31天）
					</view>
				</view>
				<view class="price-info">
					<view class="price-name">欠费金额</view>
					<view class="price-item">
						<view class="price">-60.1</view>
						<view class="unit">元</view>
						<view class="iconfont icon-a-jinggao1" @click="isDialog=true"></view>
					</view>
				</view>
			</view>
		</view>
		<SuccessDialog v-if="isDialog" @callback="handleCallback">
			<view class="dialog-title">滞纳金计算</view>
			<view class="dialog-content">
				<view class="dialog-item">
					<view class="dialog-name">累计天数：</view>
					<view class="dialog-text red">2025-01-01至2025-01-31（31天）</view>
				</view>
			</view>
			<view class="dialog-content">
				<view class="dialog-item">
					<view class="dialog-name">滞纳金：</view>
					<view class="dialog-text">欠费天数x欠费金额x0.5%(</view>
					<view class="dialog-text red">=31x387.6x0.005=60.1元</view>
				</view>
			</view>
			<view class="dialog-content">
				<view class="dialog-item">
					<view class="dialog-name">注：</view>
					<view class="dialog-text">滞纳金原则上不超过欠费金额</view>
				</view>
			</view>
		</SuccessDialog>
	</view>
</template>

<script>
	import {
		getFwInfoByIdApi
	} from '@/api/rent_payment.js'
	import {
		getStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				isDialog: false,
				info: {
					houseType: '',
					usableArea: 0,
					houseAreaType: 0,
					totalPrice: 0,
					lqValue: 0,
					floorLevel: 0,
					unitPricePerSquare: '',
					calculatedPrice: '',
					rentToBePaid: 0,
					rentToBePaidStartTime: '2024-01-01',
					rentToBePaidEndTime: '2024-12-31',
					rentLateDays: 0
				}
			}
		},
		methods: {
			handleCallback(e) {
				this.isDialog = false
			},
			getLInfo() {
				getFwInfoByIdApi({
					id: getStorage('selectInfo').id
				}).then((res) => {
					this.info = res
				})
			},
		},
		onLoad(e) {
			this.getLInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.calculator-page {
		overflow: hidden;
		opacity: 1;
		background: rgba(252, 63, 59, 0.9);

		.home-bg {
			width: 100%;
			position: absolute;
		}

		.info-block {
			padding: 30rpx;
			border-radius: 30rpx;
			position: relative;

			.title {
				margin-top: 60rpx;
				font-size: 50rpx;
				color: #fff;
			}

			.text {
				color: #fff;
				font-size: 30rpx;
				margin-top: 30rpx;
			}

			.info-content {
				background-color: #fff;
				margin-top: 80rpx;
				padding: 30rpx;
				border-radius: 20rpx;

				.info-item:last-child {
					border-bottom: none;
				}

				.info-item {
					border-bottom: 1px solid #f7f7f7;
					display: flex;
					line-height: 100rpx;
					justify-content: space-between;
					align-items: center;
				}
			}

			.price-block {
				background-color: #fff;
				margin-top: 30rpx;
				padding: 30rpx;
				border-radius: 20rpx;

				.price-info:last-child {
					border-bottom: none;
				}

				.price-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #f7f7f7;
					line-height: 90rpx;

					.price-name {
						font-size: 30rpx;
						color: #767676;
					}

					.price-text {
						font-size: 28rpx;
					}

					.price-item {
						display: flex;
						align-items: center;

						.price {
							color: $theme-color;
							font-weight: bold;
							font-size: 38rpx;
						}

						.unit {
							margin-left: 10rpx;
							font-size: 38rpx;
						}

						.iconfont {
							font-size: 34rpx;
							color: #767676;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.dialog-title {
			font-size: 32rpx;
			font-weight: bold;
			margin: 40rpx auto;
		}

		.red {
			color: $theme-color;
			margin-right: 6rpx;
			font-weight: bold;
		}

		.weight {
			font-weight: bold;
		}

		.dialog-content {
			margin-bottom: 50rpx;

			.dialog-item {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 6rpx;

				.dialog-text {
					font-size: 28rpx;
				}
			}
		}

	}
</style>